<template>
  <div style="height: 523px;overflow: hidden;background: white;border: 1px solid white; border-radius: 12px; margin-top: 10px ">

    <el-button style="position: absolute; right: 26px; top:3px;" type="primary" size="mini"  @click=" dialog = true "round>库房状态查询</el-button>
    <div style="text-align: left ;font-size: 14px;background-color: #E9EEF3; height: 65px; margin: 10px; padding: 4px; border-radius: 7px;">
     <el-row style="padding: 10px; line-height: 21px;">
      <el-col :sapn="24">
         <p>符合条件的产品总数9例 </p>
      </el-col>
      <el-col :sapn="1">
         <span style="color: blue">当前库存总数：0例</span>&nbsp;
         <span style="color: red;">当前库存上限报警产品种类数：0例</span>&nbsp;
         <span style="color: orange;">库存下限报警产品种类数：3种</span>
      </el-col>
     </el-row>

    </div>
    <div style="background-color: #E9EEF3; height: 346px; margin: 10px; padding: 4px; border-radius: 7px;">
      <template>
         <el-table
           :data="tableData"
           style="width: 100% " size="mini">
           <el-table-column
             prop="reprkdbh"
             label="申请单编号"
             width="235">
           </el-table-column>
           <el-table-column
             prop="name"
             label="调入库"
             width="235">
           </el-table-column>
           <el-table-column
             prop="name"
             label="登记时间"
             width="145">
           </el-table-column>
           <el-table-column
             prop="name"
             label="总件数"
             width="100">
           </el-table-column>
           <el-table-column
             prop="name"
             label="申请单状态"
             width="100">
           </el-table-column>
           <el-table-column
             prop="name"
             label="审核状态"
             width="100">
           </el-table-column>
         <el-table-column
             prop="name"
             label="入库状态"
             width="100">
           </el-table-column>
         </el-table>
       </template>
         <div class="block" style="margin-top: 25px;">
           <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="14"
             :page-sizes="[100, 200, 300, 400]"
             :page-size="100"
             layout="total, sizes, prev, pager, next, jumper"
             :total="400">
           </el-pagination>
         </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'repoutsel',
    data() {
      return {
        tableData: [],
        table: false,
              dialog: false,
              loading: false,
              gridData: [],
              form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
              },
              formLabelWidth: '90px',
              timer: null,
                      pickerOptions: {
                        shortcuts: [{
                          text: '最近一周',
                          onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                          }
                        }, {
                          text: '最近一个月',
                          onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                          }
                        }, {
                          text: '最近三个月',
                          onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                          }
                        }]
                      },
                      value1: '',
                      value2: ''

      }
    },
			mounted(){
			this.$http.post("selRepchurukudontai")
			.then((res) => {
						this.tableData=res.data;
					})
					.catch((err) => { //请求失败
				console.log(err);
			});
		}
		,
    methods: {
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
       handleClose(done) {
            if (this.loading) {
              return;
            }
            this.$confirm('确定要提交表单吗？')
              .then(_ => {
                this.loading = true;
                this.timer = setTimeout(() => {
                  done();
                  // 动画关闭需要一定的时间
                  setTimeout(() => {
                    this.loading = false;
                  }, 400);
                }, 2000);
              })
              .catch(_ => {});
          },
          cancelForm() {
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
          }
    }
  }
</script>

<style scoped="scoped">
  * {
    padding: 0px;
    margin: 0px;
  }

  .el-breadcrumb__inner {
    color: black;

  }
  .el-input__inner {

    height: 25px;

  }

  .el-input__prefix,
  .el-input__suffix {
    position: absolute;
    top: 7px;
    -webkit-transition: all .3s;
    height: 100%;
    color: #C0C4CC;
    text-align: center;
  }
  .el-table td{
      padding: 10px 0;
  }

  .el-input__inner {
      height: 28px;
  }
</style>
